<template id="tempalte-home">
  <div class="header">
    	<div class="nav-icon">
    		<img class="logo" src="../assets/img/logo.png"/>
    	</div>
      <div class="nav" :style="bot">
    	 <div @click="select" class="nav-div">
    	 	<a class="href-home" href="#/">首 页</a>
    	 </div>
    	 <div @click="select" class="nav-div">
        <a class="href-product" href="#/product">产 品 简 介</a>
       </div>
       <div @click="select" class="nav-div">
        <a class="href-service" href="#/service">技 术 服 务</a>
       </div>
       <div @click="select" class="nav-div">
        <a class="href-information" href="#/information/page/1">智 能 资 讯</a>
       </div>
       <div @click="select" class="nav-div">
        <a class="href-company" href="#/company">公 司 介 绍</a>
       </div>
       <div class="block"></div>
    	</div>
    	<div class="nav-right" @click="menu">
    		首页
        <i class="iconfont icon-weibiaoti12"></i>
    	</div>
    </div>
  </div>
</template>
<script>
	export default {
	id:'template-header',
  name: 'header',
  data(){
    return{
      bot:"bottom:100%;"
    }
  },
  methods:{
    select(){
      moveback(true);
    },menu(){
      if(this.bot=="bottom:100%;"){
        this.bot="bottom:0;"
      }else{
        this.bot=  "bottom:100%"; 
      }
    }
  },
  created(){
    window.onload=function(){
      if($(document).width()>480){
        var start = location.href.indexOf("#")+1;
        var hash = location.href.substr(start,location.href.length-start);
        if(hash=="/"){
          $(".href-home").addClass("selected")
        }else if(hash=="/product"){
          $(".href-product").addClass("selected")
        }else if(hash=="/service"){
          $(".href-service").addClass("selected")
        }else if(hash=="/information/page/1"){
          $(".href-information").addClass("selected")
        }else if(hash=="/company"){
          $(".href-company").addClass("selected")
        }
        moveback(true);
      }
    }
  }
}
	 function moveback(isclick){
      var $t, leftX, newWidth;
      var $block = $('.block');
      var bleft = $('.selected').position().left;
      $block.width($(".selected").width()).
        css("left", $('.selected').position().left).
        data('rightLeft',bleft).
        data('rightWidth', $block.width());
      $('.nav').find('a').hover(function() {
        $t = $(this);
        leftX = $t.position().left;
        newWidth = $t.width();
        $block.stop().animate({
          left: leftX,
          width: newWidth
        },500);
      }, function() {
        $block.stop().animate({
          left: $block.data('rightLeft'),
          width: $block.data('rightWidth')
        },500)
      }).click(function(){
        if(isclick)$(".selected").removeClass("selected");
        $(this).addClass("selected");
      })
    }
</script>
<style scoped>
  	.header{
    z-index: 1;
    width: 100%;
    min-width: 1000px;
    padding: 20px 80px;
    box-sizing: border-box;
    position: absolute;
    top: 0;
  }
  .nav-right{display: none;}
  .logo{
    height:50px;
  }
  .nav{
    float: left;
    display: inline-block;
    width: 70%; 
  }
  .nav >.nav-div{
    line-height: 50px;
    float: left;
    display: inline-block;
    width: 20%;
  }
  .nav-icon{
    float: left;
    width: 30%; 
    text-align: center;
  }
  a{
    text-align: center;
    padding-bottom: 10px;
    color: #DADADA;
    text-decoration: none;
  }
  .block{
    position: absolute;
    top: 62px;
    border-bottom: solid 2px white;
  }
  
</style>